<script setup>
import Header from '@/components/header/App.vue'
import Breadcrumb from '@/components/breadcrumb/App.vue'
import Sidebar from '@/components/sidebar/App.vue'
import Footer from '@/components/footer/App.vue'
</script>

<template>
  <Header></Header>
  <div class="details">
    <Breadcrumb first-bread="服务能力" last-bread="互联网营销服务"></Breadcrumb>

    <h1 class="page-title">互联网营销服务</h1>

    <p class="page-subtitle">专业数字营销解决方案，助力企业实现品牌曝光和销售增长</p>

    <div class="overview-section">
      <div class="overview-content">
        <div class="overview-text">
          <h2>互联网营销服务概述</h2>
          <p>
            在数字化时代，互联网营销已成为企业获取客户、提升品牌影响力的核心手段。我们的互联网营销服务团队由资深数字营销专家组成，拥有丰富的行业经验和成功案例。我们采用数据驱动的营销策略，结合最新的数字营销技术，为客户提供全方位的互联网营销解决方案。
          </p>
          <p>通过精准的目标受众定位和效果评估，我们确保每一分营销投入都能获得最大回报。无论是初创企业还是成熟品牌，我们都能提供量身定制的营销方案，帮助客户在激烈的市场竞争中脱颖而出。</p>
        </div>
        <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="互联网营销" class="overview-image">
      </div>
    </div>

    <div class="services-section">
      <h2 class="section-title">我们的服务内容</h2>
      <p>我们提供全方位的数字营销服务，覆盖从策略规划到执行落地的全流程</p>

      <div class="services-grid">
        <!-- SEO -->
        <div class="service-card">
          <div class="service-icon">🔍</div>
          <h3>搜索引擎优化(SEO)</h3>
          <p>通过关键词研究、内容优化、技术优化等手段，提升网站在搜索引擎中的自然排名，获取精准流量。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- SEM -->
        <div class="service-card">
          <div class="service-icon">💰</div>
          <h3>搜索引擎营销(SEM)</h3>
          <p>通过竞价广告投放，快速获取精准流量，实现品牌曝光和销售转化。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 社交媒体 -->
        <div class="service-card">
          <div class="service-icon">📱</div>
          <h3>社交媒体营销</h3>
          <p>在微信、微博、抖音等社交平台开展营销活动，提升品牌互动和用户粘性。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 内容营销 -->
        <div class="service-card">
          <div class="service-icon">✍️</div>
          <h3>内容营销</h3>
          <p>通过高质量内容创作和分发，建立品牌权威，吸引并转化目标客户。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 电子邮件 -->
        <div class="service-card">
          <div class="service-icon">✉️</div>
          <h3>电子邮件营销</h3>
          <p>通过精准的邮件推送，维护客户关系，促进复购和交叉销售。</p>
          <a href="javascript:;">了解详情</a>
        </div>

        <!-- 数据分析 -->
        <div class="service-card">
          <div class="service-icon">📊</div>
          <h3>数据分析与优化</h3>
          <p>基于数据分析，持续优化营销策略，提升营销ROI。</p>
          <a href="javascript:;">了解详情</a>
        </div>
      </div>
    </div>

    <div class="process-section">
      <h2 class="section-title">我们的服务流程</h2>
      <p>科学严谨的服务流程，确保营销效果最大化</p>

      <div class="process-steps">
        <div class="step">
          <div class="step-number">1</div>
          <div class="step-title">需求分析</div>
          <div class="step-desc">深入了解企业目标和市场需求</div>
        </div>

        <div class="step">
          <div class="step-number">2</div>
          <div class="step-title">策略制定</div>
          <div class="step-desc">定制专属数字营销策略方案</div>
        </div>

        <div class="step">
          <div class="step-number">3</div>
          <div class="step-title">执行落地</div>
          <div class="step-desc">专业团队执行营销活动</div>
        </div>

        <div class="step">
          <div class="step-number">4</div>
          <div class="step-title">效果监测</div>
          <div class="step-desc">实时跟踪营销数据表现</div>
        </div>

        <div class="step">
          <div class="step-number">5</div>
          <div class="step-title">优化迭代</div>
          <div class="step-desc">持续优化提升营销效果</div>
        </div>
      </div>
    </div>

    <div class="stats-section">
      <h3 class="stats-title">我们的营销成果</h3>

      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-number">200+</div>
          <div class="stat-label">服务客户</div>
        </div>

        <div class="stat-item">
          <div class="stat-number">300%</div>
          <div class="stat-label">平均流量增长</div>
        </div>

        <div class="stat-item">
          <div class="stat-number">5X</div>
          <div class="stat-label">平均ROI提升</div>
        </div>

        <div class="stat-item">
          <div class="stat-number">98%</div>
          <div class="stat-label">客户满意度</div>
        </div>
      </div>
    </div>

    <div class="cases-section">
      <h2 class="section-title">成功案例</h2>
      <p>我们已为众多企业提供了优质的数字营销服务</p>

      <div class="case-list">
        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="电商案例" class="case-image">
          <div class="case-content">
            <h4>某电商平台SEO优化</h4>
            <p>通过全面的SEO优化策略，帮助客户实现自然搜索流量增长350%，转化率提升200%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="教育案例" class="case-image">
          <div class="case-content">
            <h4>教育机构社交媒体营销</h4>
            <p>通过精准的社交媒体营销策略，帮助客户粉丝增长500%，课程咨询量提升300%。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>

        <div class="case-card">
          <img src="https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/meikou/banner/nuandong_sj.png" alt="金融案例" class="case-image">
          <div class="case-content">
            <h4>金融企业SEM投放优化</h4>
            <p>通过精细化SEM投放策略，帮助客户降低获客成本40%，ROI提升5倍。</p>
            <a href="javascript:;">查看详情 →</a>
          </div>
        </div>
      </div>
    </div>


    <Footer></Footer>
  </div>
</template>

<style scoped>
.details{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题 */
.page-title {
  font-size: 32px;
  text-align: center;
  margin: 40px 0;
  color: #1e5799;
  position: relative;
  padding-bottom: 20px;
}

.page-title:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  background: #207cca;
}

.page-subtitle {
  text-align: center;
  font-size: 18px;
  color: #666;
  max-width: 800px;
  margin: 0 auto 50px;
  line-height: 1.8;
}

/* 服务概览 */
.overview-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.overview-content {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.overview-text {
  flex: 1;
}

.overview-text h2 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #1e5799;
}

.overview-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 20px;
}

.overview-image {
  width: 500px;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  margin-left: 40px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务内容 */
.services-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 24px;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
  color: #1e5799;
  position: relative;
}

.section-title:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 80px;
  height: 2px;
  background: #207cca;
}

/* 服务网格 */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.service-card {
  background-color: #f9fbff;
  border-radius: 8px;
  padding: 30px;
  border: 1px solid #e0e9ff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(30, 87, 153, 0.1);
  background-color: white;
}

.service-icon {
  font-size: 48px;
  color: #207cca;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #1e5799;
}

.service-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.service-card a {
  display: inline-block;
  background-color: #1e5799;
  color: white;
  padding: 8px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.3s;
}

.service-card a:hover {
  background-color: #207cca;
}

/* 服务流程 */
.process-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  position: relative;
}

.process-steps:before {
  content: "";
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(to right, #207cca, #1e5799);
  z-index: 1;
}

.step {
  text-align: center;
  position: relative;
  z-index: 2;
  width: 20%;
}

.step-number {
  width: 60px;
  height: 60px;
  background-color: #207cca;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin: 0 auto 15px;
  box-shadow: 0 5px 15px rgba(30, 87, 153, 0.3);
}

.step-title {
  font-size: 16px;
  font-weight: bold;
  color: #1e5799;
  margin-bottom: 10px;
}

.step-desc {
  font-size: 14px;
  color: #666;
}

/* 案例展示 */
.cases-section {
  background-color: white;
  border-radius: 8px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
}

.case-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.case-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.case-card:hover {
  transform: translateY(-5px);
}

.case-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.case-content {
  padding: 20px;
  background-color: white;
}

.case-content h4 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #1e5799;
}

.case-content p {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.case-content a {
  display: inline-block;
  color: #207cca;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
}

/* 数据统计 */
.stats-section {
  background: linear-gradient(135deg, #1e5799 0%, #207cca 100%);
  border-radius: 8px;
  padding: 60px 40px;
  margin-bottom: 40px;
  color: white;
  text-align: center;
}

.stats-title {
  font-size: 28px;
  margin-bottom: 40px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.stat-item {
  padding: 20px;
}

.stat-number {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  opacity: 0.9;
}



</style>